$(document).ready(() => {

  const initData = [
    // {name:'my_logo', value: `${$('#my_logo').attr('src').trim()}`},// 个人头像
    {name:'my_name', value: `${$('#js-my_name').text().trim().replace(/邀请你加入/, '').replace(/(.{1,5}).+?(.{1,5})$/, '$1...')}`},// 梁先生
    {name:'zizhanghao_img', value: `${$('.js-zizhanghao > img').attr('src').trim()}`},// 子账号logo
    {name:'zizhanghao_name', value: `${$('.js-zizhanghao_name').text().trim()}`},// 子账号名称
    {name:'zizhanghao_give', value: `${$('.js-zizhanghao_present').text().trim()}`},// 子账号分成
    // {name:'my_qrcode', value: `${$('.js-my_qr img').attr('src').trim()}`},// 二维码
    {name:'invent_code', value: `${$('.js-my_invent_code').text().trim()}`},// 邀请码
  ]
  const baseData = this.__baseData__ = `{"version":"2.1.0","objects":[{"type":"textbox","version":"2.1.0","originX":"left","originY":"top","left":157.15,"top":32.54,"width":375,"height":15.82,"fill":"#000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"__inori__my_name邀请你加入","fontSize":"14","fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{}},{"type":"textbox","version":"2.1.0","originX":"left","originY":"top","left":0,"top":153.9,"width":375,"height":15.82,"fill":"#000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"__inori__zizhanghao_name","fontSize":"14","fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{}},{"type":"textbox","version":"2.1.0","originX":"left","originY":"top","left":0,"top":182.9,"width":375,"height":15.82,"fill":"#000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"__inori__zizhanghao_give","fontSize":"14","fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{}},{"type":"textbox","version":"2.1.0","originX":"left","originY":"top","left":182.5,"top":575.9,"width":240,"height":11.3,"fill":"#808080","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"邀请码","fontSize":"10","fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{}},{"type":"textbox","version":"2.1.0","originX":"left","originY":"top","left":187.5,"top":592.9,"width":240,"height":11.3,"fill":"#808080","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"__inori__invent_code","fontSize":"10","fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{}},{"type":"textbox","version":"2.1.0","originX":"left","originY":"top","left":158.5,"top":636.9,"width":240,"height":11.3,"fill":"#808080","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"抱团做贷款更赚钱","fontSize":"10","fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{}},{"type":"textbox","version":"2.1.0","originX":"left","originY":"top","left":188.5,"top":651.9,"width":240,"height":11.3,"fill":"#808080","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"提供技术支持","fontSize":"10","fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{}},{"type":"textbox","version":"2.1.0","originX":"left","originY":"top","left":151.5,"top":651.9,"width":240,"height":11.3,"fill":"#0080ff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"评估令","fontSize":"10","fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{}}],"backgroundImage":{"type":"image","version":"2.1.0","originX":"center","originY":"center","left":210,"top":250,"width":0,"height":0,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"","filters":[]}}`
  // 赋值
  $('#my_logo').text()
  $.each(initData, (index, item) => {
    this.__baseData__ = this.__baseData__.replace(`__inori__${item.name}`, item.value)
  })

  // 画布相关
  var canvas = window.__canvas = new fabric.Canvas('inori_canvas');
  const imgURL = `https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1521168282&di=85e42f8d76d5a338f15b6012fd085153&src=http://img5.xiazaizhijia.com/walls/20160708/1440x900_2f172c09d079701.jpg`
  // promise base
  new Promise((resolve, reject) => {
    window.__canvas.loadFromJSON(this.__baseData__, () => {
      window.__canvas.renderAll()
      resolve(window.__canvas)
    })
  }).then((canvas) => {
    return new Promise((resolve, reject) => {
      window.__canvas.setBackgroundColor('rgba(255, 255, 255, 1)', _ => {
        window.__canvas.renderAll()
        resolve(window.__canvas)
      })
      // resolve(window.__canvas)
    })
  }).then((canvas) => {
    return new Promise((resolve, reject) => {
      // 添加个人头像
      const ajaxURL = `${$('#ajax_curl_img').val()}`
      $.ajax(ajaxURL, {
        type: 'get',
        data: {url: `${$('#my_logo').attr('src').trim()}`}
      }).fail((err) => {
        reject(err)
      }).done((res) => {
        if (!res.code) {
          reject(new Error(`响应错误${JSON.stringify(res)}`))
        } else if (res.code && `${res.code}` !== '1') {
          reject(new Error(`响应错误${JSON.stringify(res)}`))
        } else if (res.code && `${res.code}` === '1') {
          resolve(res.data)
        }
      })
    }).then((url) => {
      return new Promise ((resolve, reject) => {
        new fabric.Image.fromURL(url, function(oImg) {
          oImg.scaleToWidth(40)
          window.__canvas.add(oImg);
          // 纵向调整
          // 16(自己头像top) + 50(自己头像height) + 15(子账号名称的top 153 减去前边两者再减去 scaleToWidth 后 对半 得到)
          oImg.top = 15.62;
          oImg.left = 114.66;
          window.__canvas.renderAll()
          resolve(window.__canvas)
        })
      })
    })
  }).then((canvas) => {
    debugger
    return new Promise((resolve, reject) => {
      // 添加子账号头像
      new fabric.Image.fromURL(`${$('.js-zizhanghao > img').attr('src')}`, function(oImg) {
        oImg.scaleToWidth(50)
        oImg.scaleToHeight(50)
        window.__canvas.add(oImg);
        // 水平居中
        oImg.centerH();
        // 纵向调整
        // 16(自己头像top) + 50(自己头像height) + 15(子账号名称的top 153 减去前边两者再减去 scaleToWidth 后 对半 得到)
        oImg.top = 81;
        window.__canvas.renderAll()
        resolve(window.__canvas)
      })
    })
  }).then((canvas) => {
    return new Promise((resolve, reject) => {
      // 添加二维码
      const ajaxURL = `${$('#ajax_curl_img').val()}`
      $.ajax(ajaxURL, {
        type: 'get',
        data: {url: `${$('.js-my_qr img').attr('src').trim()}`}
      }).fail((err) => {
        reject(err)
      }).done((res) => {
        if (!res.code) {
          reject(new Error(`响应错误${JSON.stringify(res)}`))
        } else if (res.code && `${res.code}` !== '1') {
          reject(new Error(`响应错误${JSON.stringify(res)}`))
        } else if (res.code && `${res.code}` === '1') {
          resolve(res.data)
        }
      })
    }).then((url) => {
      return new Promise((resolve, reject) => {
        new fabric.Image.fromURL(url, function(oImg) {
          oImg.scaleToWidth(300)
          window.__canvas.add(oImg);
          // 水平居中
          oImg.centerH();
          // 纵向调整
          // 185(子账号名称top) + 15.82(子账号名称height) + 20(抱团xx的top 减去前边两者再减去 scaleToWidth 后 对半 得到)
          oImg.top = 220;
          window.__canvas.renderAll()
          resolve(window.__canvas)
        })
      })
    })
  }).then((canvas) => {
    console.log(`canvas渲染完毕`)
    $('.js-download').css('opacity', '1')
    $('.js-download').on('click', (evt) => {
      let test = ``
      try {
        test = $('#inori_canvas')[0].toDataURL()
        $.toptip('长按中间小图即可分享', 'success')
      } catch (err) {
        // alert(JSON.stringify(err))
      }
      $('.js-my_qr img').attr('src', test)
    })
    // $.toptip('本机支持保存个人名片，请尝试长按保存')
  }).catch((err) => {
    console.log(`canvas渲染未完成`)
    // alert(JSON.stringify(err))
    console.log(err)
  })
})
